<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户ID" prop="userId">
                <el-input v-model="ruleForm.userId" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="接收人" prop="consignee">
                <el-input v-model="ruleForm.consignee"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="ruleForm.sex" placeholder="男">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="省份名称" prop="provinceName">
                <el-input v-model="ruleForm.provinceName"></el-input>
            </el-form-item>
            <el-form-item label="市名称" prop="cityName">
                <el-input v-model="ruleForm.cityName"></el-input>
            </el-form-item>
            <el-form-item label="县(区)名称" prop="districtName">
                <el-input v-model="ruleForm.districtName"></el-input>
            </el-form-item>
            <el-form-item label="详细地址" prop="detail">
                <el-input v-model="ruleForm.detail"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="label">
                <el-input v-model="ruleForm.label"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import {save} from '@/utils/modules/customer.js'
export default {
    props:['UserId'],
    watch:{
        UserId:{
            handler:function(newVal){
                console.log(newVal)
                this.ruleForm.userId = newVal
            },
            immediate:true,
            deep:true
        }
    },
    data() {
        // 验证手机号
        var validateMobilePhone = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('负责人手机号不可为空'));
            } else {
                let reg = new RegExp(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/);
                if (!reg.test(value)) {
                    callback(new Error('请输入有效的手机号码'));
                    return;
                }
                callback();
            }
        }
        return {
            ruleForm: {
                consignee: '',
                userId: '',
                provinceName: '',
                cityName: '',
                districtName: '',
                detail: '',
                label: '',
                sex: '1',
                phone:''
            },
            rules: {
                consignee: [
                    { required: true, message: '请输入接收人昵称', trigger: 'blur' },
                    { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                consignee: [
                    { required: true, message: '请填写接收人', trigger: 'blur' }
                ],
                provinceName: [
                    { required: true, message: '请填写省份', trigger: 'blur' }
                ],
                cityName: [
                    { required: true, message: '请填写市', trigger: 'blur' }
                ],
                districtName: [
                    { required: true, message: '请填写县(区)', trigger: 'blur' }
                ],
                detail: [
                    { required: true, message: '请填写详细地址', trigger: 'blur' }
                ],
                phone: [
                    { validator: validateMobilePhone, trigger: 'blur' }
                ],
                provinceName: [
                    { required: true, message: '请选择省份', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    save(this.ruleForm).then(res=>{
                        this.$message({
                            type:'success',
                            message:res.message,
                            showClose:true
                        })
                        setTimeout(()=>{
                            // 表单提交事件触发后自动触发父组件中的change
                            this.$emit('change',false)
                        },2000)
                    }).catch(err=>{
                        this.$message({
                            type:'error',
                            message:err.message,
                            showClose:true
                        })
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
